<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>资源桶资源上传工具</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <div class="app-container">
        <!-- 头部导航 -->
        <header class="app-header">
            <div class="header-content">
                <h1><i class="fas fa-cloud-upload-alt"></i> 资源桶上传工具</h1>
                <div class="header-actions">
                    <button id="settingsBtn" class="btn btn-secondary">
                        <i class="fas fa-cog"></i> 设置
                    </button>
                </div>
            </div>
        </header>

        <!-- 主要内容区域 -->
        <main class="main-content">
            <!-- 配置面板 -->
            <div class="config-panel">
                <div class="panel-section">
                    <h3><i class="fas fa-folder"></i> 本地资源目录</h3>
                    <div class="input-group">
                        <input type="text" id="localPath" class="form-input" placeholder="选择本地资源目录..." readonly>
                        <button id="selectLocalBtn" class="btn btn-primary">
                            <i class="fas fa-folder-open"></i> 选择目录
                        </button>
                    </div>
                </div>

                <div class="panel-section">
                    <h3><i class="fas fa-cloud"></i> 云服务配置</h3>
                    <div class="cloud-config-selector">
                        <div class="input-group">
                            <label for="providerSelect" class="form-label">云服务提供商</label>
                            <select id="providerSelect" class="form-select">
                                <option value="">请选择云服务提供商</option>
                                <option value="tencent">腾讯云 COS</option>
                                <option value="aliyun">阿里云 OSS</option>
                                <option value="bytedance">字节云 TOS</option>
                                <option value="aws">AWS S3</option>
                                <option value="huawei">华为云 OBS</option>
                            </select>
                        </div>
                        <div class="input-group" id="accountSelectGroup" style="display: none;">
                            <label for="mainAccountSelect" class="form-label">选择账号</label>
                            <div class="account-selector">
                                <select id="mainAccountSelect" class="form-select">
                                    <option value="">请选择账号</option>
                                </select>
                                <button id="manageAccountsBtn" class="btn btn-secondary" title="管理账号">
                                    <i class="fas fa-cog"></i>
                                </button>
                            </div>
                        </div>
                        <div class="connection-status" id="connectionStatus" style="display: none;">
                            <div class="status-indicator">
                                <i class="fas fa-circle"></i>
                                <span id="statusText">未连接</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="panel-section">
                    <h3><i class="fas fa-folder-tree"></i> 远程目录配置</h3>
                    <div class="input-group">
                        <input type="text" id="remotePath" class="form-input" placeholder="输入远程目录路径..." value="/">
                    </div>
                </div>
            </div>

            <!-- 文件比较结果 -->
            <div class="compare-panel" id="comparePanel" style="display: none;">
                <h3><i class="fas fa-balance-scale"></i> 文件比较结果</h3>
                <div class="compare-stats">
                    <div class="stat-item">
                        <div class="stat-number" id="newFilesCount">0</div>
                        <div class="stat-label">新增文件</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-number" id="modifiedFilesCount">0</div>
                        <div class="stat-label">修改文件</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-number" id="unchangedFilesCount">0</div>
                        <div class="stat-label">未变更文件</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-number" id="totalSize">0 B</div>
                        <div class="stat-label">总大小</div>
                    </div>
                </div>
                <div class="file-list" id="fileList"></div>
            </div>

            <!-- 上传进度 -->
            <div class="upload-panel" id="uploadPanel" style="display: none;">
                <h3><i class="fas fa-upload"></i> 上传进度</h3>
                <div class="progress-container">
                    <div class="progress-info">
                        <div class="current-file" id="currentFile">准备上传...</div>
                        <div class="progress-stats">
                            <span id="fileProgress">0/0</span>
                            <span id="sizeProgress">0 B / 0 B</span>
                            <span id="uploadSpeed">0 B/s</span>
                        </div>
                        <div class="upload-stats">
                            <span class="success-count">成功: <span id="successCount">0</span></span>
                            <span class="failed-count">失败: <span id="failedCount">0</span></span>
                            <span class="retry-info" id="retryInfo" style="display: none;">重试: <span id="retryCount">0</span> (第<span id="currentRetryAttempt">0</span>次)</span>
                        </div>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-fill" id="progressFill" style="width: 0%"></div>
                    </div>
                    <div class="progress-percentage" id="progressPercentage">0%</div>
                </div>
                <div class="upload-actions">
                    <button id="pauseBtn" class="btn btn-warning" style="display: none;">
                        <i class="fas fa-pause"></i> 暂停
                    </button>
                    <button id="cancelBtn" class="btn btn-danger" style="display: none;">
                        <i class="fas fa-stop"></i> 取消
                    </button>
                </div>
            </div>

            <!-- 操作按钮 -->
            <div class="action-panel">
                <button id="compareBtn" class="btn btn-primary" disabled>
                    <i class="fas fa-search"></i> 比较文件
                </button>
                <button id="uploadBtn" class="btn btn-success" disabled>
                    <i class="fas fa-upload"></i> 开始上传
                </button>
            </div>
        </main>
    </div>

    <!-- 云服务配置模态框 -->
    <div id="configModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="modalTitle">云服务配置</h3>
                <button class="modal-close" id="modalClose">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <form id="configForm">
                    <div class="form-group">
                        <label for="accountSelect">选择账号:</label>
                        <select id="accountSelect" class="form-input">
                            <option value="">请选择账号或添加新账号</option>
                        </select>
                        <button type="button" id="addNewAccountBtn" class="btn btn-secondary" style="margin-top: 0.5rem;">
                            <i class="fas fa-plus"></i> 添加新账号
                        </button>
                    </div>
                    
                    <div class="form-group">
                        <label for="accessKeyId">Access Key ID:</label>
                        <input type="text" id="accessKeyId" class="form-input" required>
                    </div>
                    <div class="form-group">
                        <label for="secretAccessKey">Secret Access Key:</label>
                        <input type="password" id="secretAccessKey" class="form-input" required>
                    </div>
                    <div class="form-group">
                        <label for="region">区域:</label>
                        <input type="text" id="region" class="form-input" list="regionList" required placeholder="选择或输入区域">
                        <datalist id="regionList">
                            <!-- 腾讯云区域 -->
                            <option value="ap-guangzhou">华南地区(广州)</option>
                            <option value="ap-shanghai">华东地区(上海)</option>
                            <option value="ap-beijing">华北地区(北京)</option>
                            <option value="ap-chengdu">西南地区(成都)</option>
                            <option value="ap-chongqing">西南地区(重庆)</option>
                            <option value="ap-shenzhen-fsi">华南地区(深圳金融)</option>
                            <option value="ap-shanghai-fsi">华东地区(上海金融)</option>
                            <option value="ap-beijing-fsi">华北地区(北京金融)</option>
                            <!-- AWS区域 -->
                            <option value="us-east-1">美国东部(弗吉尼亚北部)</option>
                            <option value="us-west-2">美国西部(俄勒冈)</option>
                            <option value="eu-west-1">欧洲(爱尔兰)</option>
                            <option value="ap-southeast-1">亚太地区(新加坡)</option>
                            <option value="ap-northeast-1">亚太地区(东京)</option>
                            <!-- 阿里云区域 -->
                            <option value="oss-cn-hangzhou">华东1(杭州)</option>
                            <option value="oss-cn-shanghai">华东2(上海)</option>
                            <option value="oss-cn-beijing">华北2(北京)</option>
                            <option value="oss-cn-shenzhen">华南1(深圳)</option>
                            <option value="oss-cn-guangzhou">华南2(广州)</option>
                            <!-- 字节跳动区域 -->
                            <option value="cn-north-1">华北1(北京)</option>
                            <option value="cn-south-1">华南1(广州)</option>
                            <!-- 华为云区域 -->
                            <option value="cn-north-1">华北-北京一</option>
                            <option value="cn-north-4">华北-北京四</option>
                            <option value="cn-east-2">华东-上海二</option>
                            <option value="cn-east-3">华东-上海一</option>
                            <option value="cn-south-1">华南-广州</option>
                            <option value="cn-southwest-2">西南-贵阳一</option>
                            <option value="ap-southeast-1">亚太-香港</option>
                            <option value="ap-southeast-3">亚太-新加坡</option>
                        </datalist>
                        <small class="form-hint">可从下拉列表选择或手动输入区域代码</small>
                    </div>
                    <div class="form-group">
                        <label for="bucket">存储桶名称:</label>
                        <input type="text" id="bucket" class="form-input" required placeholder="例如: my-bucket-1250000000">
                        <small class="form-hint">腾讯云存储桶名称格式: bucketname-appid</small>
                    </div>
                    <div class="form-group">
                        <label for="endpoint">终端节点 (可选):</label>
                        <input type="text" id="endpoint" class="form-input">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button id="testConnectionBtn" class="btn btn-secondary">
                    <i class="fas fa-plug"></i> 测试连接
                </button>
                <button id="saveConfigBtn" class="btn btn-primary">
                    <i class="fas fa-save"></i> 保存配置
                </button>
            </div>
        </div>
    </div>

    <!-- 设置模态框 -->
    <div id="settingsModal" class="modal">
        <div class="modal-content settings-modal">
            <div class="modal-header">
                <h2><i class="fas fa-cog"></i> 设置</h2>
                <button class="modal-close" id="settingsModalClose">&times;</button>
            </div>
            <div class="modal-body">
                <div class="settings-tabs">
                    <button class="tab-btn active" data-tab="accounts">账号管理</button>
                    <button class="tab-btn" data-tab="general">通用设置</button>
                </div>
                
                <div class="tab-content" id="accountsTab">
                    <div class="accounts-section">
                        <div class="section-header">
                            <h3>云服务账号管理</h3>
                            <button id="addAccountBtn" class="btn btn-primary">
                                <i class="fas fa-plus"></i> 添加账号
                            </button>
                        </div>
                        
                        <div class="provider-sections">
                            <div class="provider-section" data-provider="tencent">
                                <h4><i class="fas fa-cloud"></i> 腾讯云 COS</h4>
                                <div class="accounts-list" id="tencentAccounts"></div>
                            </div>
                            
                            <div class="provider-section" data-provider="aliyun">
                                <h4><i class="fas fa-cloud"></i> 阿里云 OSS</h4>
                                <div class="accounts-list" id="aliyunAccounts"></div>
                            </div>
                            
                            <div class="provider-section" data-provider="bytedance">
                                <h4><i class="fas fa-cloud"></i> 字节云 TOS</h4>
                                <div class="accounts-list" id="bytedanceAccounts"></div>
                            </div>
                            
                            <div class="provider-section" data-provider="aws">
                                <h4><i class="fab fa-aws"></i> AWS S3</h4>
                                <div class="accounts-list" id="awsAccounts"></div>
                            </div>
                            
                            <div class="provider-section" data-provider="huawei">
                                <h4><i class="fas fa-cloud"></i> 华为云 OBS</h4>
                                <div class="accounts-list" id="huaweiAccounts"></div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="tab-content" id="generalTab" style="display: none;">
                    <div class="general-settings">
                        <h3>通用设置</h3>
                        <div class="form-group">
                            <label>
                                <input type="checkbox" id="autoStartUpload"> 选择目录后自动开始上传
                            </label>
                        </div>
                        <div class="form-group">
                            <label>
                                <input type="checkbox" id="showNotifications"> 显示系统通知
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 账号配置模态框 -->
    <div id="accountConfigModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2 id="accountConfigTitle">添加账号</h2>
                <button class="modal-close" id="accountConfigModalClose">&times;</button>
            </div>
            <div class="modal-body">
                <form id="accountConfigForm">
                    <div class="form-group">
                        <label for="accountName">账号名称:</label>
                        <input type="text" id="accountName" class="form-input" required placeholder="例如: 生产环境账号">
                        <small class="form-hint">为此账号设置一个便于识别的名称</small>
                    </div>
                    
                    <div class="form-group">
                        <label for="accountProvider">云服务提供商:</label>
                        <select id="accountProvider" class="form-input" required>
                            <option value="">请选择云服务提供商</option>
                            <option value="tencent">腾讯云 COS</option>
                            <option value="aliyun">阿里云 OSS</option>
                            <option value="bytedance">字节云 TOS</option>
                            <option value="aws">AWS S3</option>
                            <option value="huawei">华为云 OBS</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label for="accountAccessKeyId">Access Key ID:</label>
                        <input type="text" id="accountAccessKeyId" class="form-input" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="accountSecretAccessKey">Secret Access Key:</label>
                        <input type="password" id="accountSecretAccessKey" class="form-input" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="accountRegion">区域:</label>
                        <input type="text" id="accountRegion" class="form-input" list="regionList" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="accountBucket">存储桶名称:</label>
                        <input type="text" id="accountBucket" class="form-input" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="accountEndpoint">终端节点 (可选):</label>
                        <input type="text" id="accountEndpoint" class="form-input">
                    </div>
                    
                    <div class="form-group">
                        <label>
                            <input type="checkbox" id="setAsDefault"> 设为默认账号
                        </label>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button id="testAccountConnectionBtn" class="btn btn-secondary">
                    <i class="fas fa-plug"></i> 测试连接
                </button>
                <button id="saveAccountBtn" class="btn btn-primary">
                    <i class="fas fa-save"></i> 保存账号
                </button>
            </div>
        </div>
    </div>

    <!-- 消息提示 -->
    <div id="messageContainer" class="message-container"></div>

    <script src="app.js"></script>
</body>
</html>